<template>
    <view class="notice-detail">
        <!-- 吸顶tab栏 -->
        <view class="tab-bar" :class="{ sticky: isSticky }">
            <view v-for="(tab, idx) in tabs" :key="tab.key" :class="['tab-item', { active: currentTab === idx }]"
                @click="onTabClick(idx)">
                {{ tab.label }}
            </view>
            <!-- <view class="tab-underline" :style="underlineStyle"></view> -->
        </view>
        <scroll-view scroll-y class="content" :scroll-into-view="scrollToView" @scroll="onScroll">
            <view :id="'section0'" ref="section0">
                <!-- 基本信息 -->
                <view class="section">
                    <view class="section-title">基本信息</view>
                    <view class="row">
                        <text class="label">报警名称</text>
                        <text class="value">{{ detail.eventName || '-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">报警来源</text>
                        <text class="value">{{ detail.eventCodeDesc || '-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">电梯状态</text>
                        <text class="value">{{ detail.isStopDesc || '-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">报警楼层</text>
                        <text class="value">{{ detail.floorNumber || '-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">报警时间</text>
                        <text class="value">{{ detail.createTime || '-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">被困人联系方式</text>
                        <text class="value">-</text>
                        <!-- <view class="value phone">
                            <image class="" src="@/static/images/callPhone.png"></image>
                            18812341234
                        </view> -->
                    </view>
                    <view class="row">
                        <text class="label">关联工单</text>
                        <view class="value order" @click="toPlanDetail(detail.planId)">
                            <text class="tag" v-if="detail.typeStatus == 3">
                                救援
                            </text>
                            <text class="tag" v-if="detail.typeStatus == 2">
                                维修
                            </text>
                            <text class="tag" v-if="detail.typeStatus == 4">
                                配件
                            </text>
                            <text class="link">{{ detail.planId || '-' }}</text>
                            <text class="done" v-if="detail.planId">{{ detail.statusDesc }}</text>
                        </view>
                    </view>
                    <view class="row">
                        <text class="label">工单创建时间</text>
                        <text class="value">{{ detail.planCreateTime||'-' }}</text>
                    </view>
                    <view class="row" v-if="detail.eventCode==100">
                        <text class="label">会话详情</text>
                        <view class="value link" @click="toMessages" >查看聊天记录</view>
                    </view>
                    <view class="row">
                        <text class="label">报警ID</text>
                        <text class="value">{{id}}</text>
                    </view>
                </view>
            </view>
            <view :id="'section1'" ref="section1">
                <!-- 项目信息 -->
                <view class="section">
                    <view class="section-title" @click="showProject = !showProject">
                        项目信息
                        <view class="toggle">{{ showProject ? '收起' : '展开' }}
                            <image :class="['toggle-icon', showProject ? 'toggle-active' : '']"
                                src="@/static/images/right.png">

                            </image>
                        </view>
                    </view>
                    <view v-if="showProject">
                        <view class="row">
                            <text class="label">电梯编号</text>
                            <text class="value">{{ detail.elevatorNum || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">项目名称</text>
                            <text class="value">{{ detail.buildingName || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">电梯位置</text>
                            <text class="value">{{ detail.elevatorAddress || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">所属维保组</text>
                            <text class="value">{{ detail.principalDeptNames || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">电梯责任人</text>
                            <text class="value">{{ detail.principalUserNames || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">物业联系人</text>
                            <view class="value phone" @click="callPhoneNumber(detail.estateLinkman[0].phone,detail.estateLinkman[0].userName)" v-if="detail.estateLinkman && detail.estateLinkman.length">
                                <image class="" src="@/static/images/callPhone.png"></image>
                                {{ detail.estateLinkman[0].userName }}({{ detail.estateLinkman[0].phone }})
                            </view>
                            <view class="value" v-else>
                                  -
                            </view>
                        </view>
                        <view class="row">
                            <text class="label">电梯类型</text>
                            <text class="value">{{ detail.elevatorTypeName || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">电梯品牌</text>
                            <text class="value">{{ detail.brandName || '-' }}</text>
                        </view>
                        <view class="row">
                            <text class="label">项目类型</text>
                            <text class="value">{{ detail.buildingType || '-' }}</text>
                        </view>
                        <view class="row address">
                            <text class="label">项目地址</text>
                            <text class="value">
                                {{ detail.buildingAddress || '-' }}
                            </text>
                        </view>
                    </view>
                </view>
            </view>
            <view :id="'section2'" ref="section2">
                <!-- 报警确认 -->
                <view class="section">
                    <view class="section-title">报警确认</view>
                    <view class="row">
                        <text class="label">确认结果</text>
                        <text class="value">{{ detail.confirmTypeDesc||'-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">状态</text>
                        <text class="value">{{ detail.confirmStatusDesc?'已确认':'待确认' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">备注</text>
                        <text class="value">{{ detail.remark||'-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">确认人</text>
                        <text class="value">{{ detail.confirmUser||'-' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">确认时间</text>
                        <text class="value">{{ detail.confirmTime||'-' }}</text>
                    </view>
                </view>
                <view class="bottom-placeholder"></view>
            </view>
        </scroll-view>
        <view class="fixed-btn" v-if="!detail.confirmStatusDesc">
            <button class="confirm-btn" @click="showConfirmForm">立即确认</button>
        </view>
        <noticeConfirm ref="noticeConfirm" @success="successFuc"></noticeConfirm>
    </view>
</template>

<script>
import noticeConfirm from './components/notice-confirm.vue';
import { getNoticeDetail, getRescue } from '@/apis/rescue';
export default {
	components:{noticeConfirm},
	data() {
		return {
			planDetail: {},
			id: '',
			detail: {},
			showProject: true,
			tabs: [
				{ label: '基本信息', key: 'section0' },
				{ label: '项目信息', key: 'section1' },
				{ label: '报警确认', key: 'section2' }
			],
			currentTab: 0,
			scrollToView: '',
			sectionTops: [0, 0, 0],
			isSticky: false
		};
	},
	computed: {
		underlineStyle() {
			return {
				left: (this.currentTab * 180) + 'rpx',
				width: '160rpx'
			};
		}
	},
	onLoad(os) {
		this.id = os.id;
		this.getNoticeDetail();
	},
	mounted() {
		this.$nextTick(() => {
			setTimeout(this.calcSectionTops, 500);
		});
	},
	methods: {
		toPlanDetail() {
			if (!this.detail.planId) return;
			uni.navigateTo({
				url: '/subpages/rescue/rescueDetail?planId=' 
                    + this.detail.planId + '&elevatorId=' + this.detail.elevatorId + '&buildingId=' + this.detail.buildingId,
			});
		},
		toMessages() {
			uni.navigateTo({
				url: `/subpages/rescue/messages?id=${this.id}`
			});
		},
		showConfirmForm() {
			console.log(111);
			this.$refs.noticeConfirm.open(this.detail);
		},
		getRescue(id) {
			getRescue(id).then(res => {
				this.planDetail = res.data;
			});
		},

		successFuc() {
			this.getNoticeDetail();
		},
		getNoticeDetail() {
			uni.showLoading({
				title:'加载中',
				mask:true,
			});
			getNoticeDetail({ rescueNoticeId: this.id }).then(res => {
				this.detail = res.data;
				if (res.data.planId) {
					// this.getRescue(res.data.planId);
				}
				uni.hideLoading();
			});
		},
		calcSectionTops() {
			// 计算每个section距离scroll-view顶部的距离
			const query = uni.createSelectorQuery().in(this);
			this.tabs.forEach((tab) => {
				query.select(`#${tab.key}`).boundingClientRect();
			});
			query.exec(res => {
				if (res) {
					console.log(111,res);
					this.sectionTops = res.map(r => {
						if (r.id == 'section2') {
							return r ? ( r.top - r.height) : 0;
						} else {
							return r ? ( r.top ) : 0;
						}
					});
				}
			});
		},
		onTabClick(idx) {
			this.currentTab = idx;
			this.scrollToView = this.tabs[idx].key;
			setTimeout(() => {
				this.scrollToView = '';
			}, 300);
		},
		onScroll(e) {
			console.log(e);
			// 监听滚动，自动高亮tab
			const scrollTop = e.detail.scrollTop;
			let active = 0;
			for (let i = this.sectionTops.length - 1; i >= 0; i--) {
				if (scrollTop + 150 >= this.sectionTops[i]) {
					active = i;
					break;
				}
			}
			// 只有当active值真正改变时才更新currentTab，避免不必要的重新渲染
			if (this.currentTab !== active) {
				this.currentTab = active;
			}
		},
		callPhoneNumber(phone, name) {
			if (phone) {
				uni.showModal({
					title: name ? ('呼叫' + name) : '拨打电话',
					content: phone,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone
							});
						}
					},
				});
			} else {
				uni.showToast({
					title: '无效的电话号码',
					icon: 'none'
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.notice-detail {
    position: relative;
    height: 100vh;
    background: #f7f8fa;
    font-size: 28rpx;

    .tab-bar {
        display: flex;
        align-items: center;
        background: #fff;
        // height: 80rpx;
        position: sticky;
        padding: 0 20rpx;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid #e5e5e5;

        .tab-item {
            font-size: 26rpx;
            color: #93B1C7;
            font-weight: normal;
            margin-right: 32rpx;
            transition: .1s all;
            position: relative;
            height: 86rpx;
            line-height: 86rpx;
            border-bottom: 2px solid #fff;

            &.active {
                font-size: 30rpx;
                color: #0091FF;
                font-weight: bold;
                border-color: #0091FF;
            }
        }

        .tab-underline {
            position: absolute;
            bottom: 0;
            height: 6rpx;
            background: #0091FF;
            border-radius: 3rpx;
            transition: left 0.2s;
        }
    }

    .content {
        height: 100vh;
        box-sizing: border-box;
        padding-bottom: 140rpx;
    }

    .section {
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 32rpx;
        border-radius: 4px;
        padding: 24rpx;
        margin: 20rpx;
        padding-bottom: 0;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);

        .section-title {
            font-weight: bold;
            padding-bottom: 24rpx;
            font-size: 32rpx;
            color: #3D3D3D;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .row {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-bottom: 32rpx;

            .label {
                color: #3D3D3D;
                font-weight: bold;
                font-size: 26rpx;
                margin-bottom: 8rpx;
            }

            .value {
                color: #333;
                font-size: 28rpx;
                word-break: break-all;
            }
            .order{
                display: flex;
                align-items: center;
            }

            .phone,
            .link {
                color: #0091FF;
                font-size: 28rpx;

                image {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 2rpx;
                    // padding-top: 2rpx;
                    padding-bottom: 2rpx;
                    vertical-align: text-bottom;
                }
            }

            .done {
                color: #999;
                font-size: 24rpx;
                margin-left: 8rpx;
                border-radius: 2px;
                padding: 0 4rpx;
                // vertical-align: top;
                border: 1px solid #999999;
            }

            .tag {
                color: #0091FF;
                font-size: 24rpx;
                margin-left: 8rpx;
                border-radius: 2px;
                padding: 0 4rpx;
                background-color: #DCF0FF;
                // vertical-align: top;
                margin-right: 4rpx;
                // border: 1px solid #0091FF;
            }
        }

        .address {
            .value {
                white-space: pre-line;
            }
        }
    }

    .fixed-btn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        padding: 16rpx 24rpx 32rpx 24rpx;
        box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
        z-index: 10;

        .confirm-btn {
            width: 100%;
            font-size: 28rpx;
            border-radius: 8rpx;
            height: 68rpx;
            line-height: 68rpx;
            background-color: #0091FF;
        }
    }

    .bottom-placeholder {
        height: 120rpx;
    }

    .toggle {
        font-size: 24rpx;
        margin-left: auto;
        display: flex;
        align-items: center;
        color: #0091FF;
        font-weight: normal;

    }

    .toggle-icon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 4rpx;
        //旋转90度
        transform: rotate(90deg);
        transition: .3s all;
    }

    .toggle-active {
        transform: rotate(-90deg);
    }
}
</style>